<template>
<h1>开关组件</h1>
<!--  默认由布尔类型来控制开关的 true打开 false关闭-->
<!--  还可以使用active-value和inoctive-value来自定义开关的打开和关闭状态
额外支持String与number类型-->
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  <hr>
  是否为管理员<el-switch v-model="isAdmin" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
  是否显示图片<el-switch v-model="isShowImg" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
  <hr>
  <img src="../../public/fcq.jpg" width="200px" v-if="isShowImg">
  <el-switch v-model="num" active-value="1" :inactive-value="0"></el-switch>
  <el-switch v-model="numStr" active-value="'1'" :inactive-value="'0'"></el-switch>
  <el-switch v-model="str" active-value="aa" :inactive-value="bb"></el-switch>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(true)
const isAdmin = ref(false)
const isShowImg = ref(false)
const num = ref(0)
const numStr = ref('1')
const str = ref('aa')
</script>

<style scoped>

</style>